<template>
<div v-if="pageShow" class="fenye-wrapper">
  <div class="ui right pagination menu tiny">
    <a class="icon item" @click='changePage(current_page-page_num<1?1:current_page-page_num)' v-show="current_page-page_num>=1"><i class="left chevron icon"></i></a>
    <a :data-val="page" @click='changePage(page)' v-for="(page,ind) in pageArr" class="item" :class="{active:page==current_page}">{{page}}</a>
    <a class="icon item" @click='changePage(current_page+page_num)' v-show="current_page+page_num<=pages"><i class="right chevron icon"></i></a>
    <div class="item">
      <div class="ui right labeled input">
        <span class="ui label">共<span class="myimp">{{total}}</span>条记录,<span class="myimp">{{pages}}</span>页，</span>
        <input type="number" min="1" :max="pages" v-model='jump_page' @keyup.enter='changePage(jump_page)' placeholder="跳转到">
        <a class="ui label" @click='changePage(jump_page)'>跳转</a>
      </div>
    </div>
  </div>
</div>
</template>
<script type="text/ecmascript-6">
import tool from 'src/util/tool'


export default {
  data() {
    return {
      current_page: 1,
      jump_page: "",
      page_num: tool.PAGE_NUM
    }
  },
  computed: {
    pageArr() {
      let tmp = []
      let left = this.pages - this.current_page + 1
      let len = left > this.page_num ? this.page_num : left

//      tool.cl(len,left)
      let preNum = 0,
        nextNum = 0
      // let half = (len - 1) / 2
      let half = (len - 1)


      let start = this.current_page - half


      let end = parseInt(this.current_page) + half
//      tool.cl("end11:", end)
      end = end > this.pages ? this.pages : end

      if (end - start < this.page_num) {
        start = end - this.page_num
      }

      start = start < 1 ? 1 : start


//       tool.cl("len:", len)
//       tool.cl("half:", half)
//       tool.cl("start:", start)
//       tool.cl("end:", end)



      for (let i = start; i <= end; i++) {
        tmp.push(i)
      }
      return tmp
    },
    pageShow() {
      return this.pages > 1;
    },
    placeholder() {
      return `共${this.total}条记录,${this.pages}页，`;
    }
  },
  watch: {
    page:function(val,old) {
     if(val&&val!=this.current_page) {
       this.changePage(val);
     }
    }
  },
  created() {
      this.current_page=this.page;
  },
  methods: {
    changePage(page) {
      if (page < 1) {
        alert('页数不正确')
        this.jump_page = ""
        return
      }
      if (page > this.pages) {
        alert('超过最大页数')
        this.jump_page = ""
        return
      }
      this.current_page = page
      this.$emit('changePage', page)
      this.jump_page = ""
    },
  },
  components: {},
  props: ['pages','page','total']
}
</script>
<style rel="stylesheet/less" scoped lang="less">@dir: "common/";

.fenye-wrapper {
  .myimp{
    display: inline-block;
    padding:0 5px;
    color: black;
    font-weight:bolder;
  }
  margin-top:10px;
  /*float: right;*/
    input {
        width: 80px;
    }
}
</style>
